<template>
    <div class="div">
         <Category title="游戏" > 
            <template scope="play">
                <ul>
                    <li v-for="(g,index) in play.games" :key="index">{{g}}</li>
                </ul>
            </template>
         </Category>
          <Category title="游戏" > 
            <template scope="play">
                <ol>
                    <li v-for="(g,index) in play.games" :key="index">{{g}}</li>
                </ol>
            </template>
         </Category>
          <Category title="游戏" > 
             <template slot-scope="{games}"><!-- 新写法和解构赋值 -->
                    <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
            </template>
         </Category>
    </div>
   
</template>

<script>
import Category from './components/Category'
    export default {  //es6暴露方法 export default 默认方法常用
        name:'App',  //告诉vue开发者工具当前组件名字
        components:{
           Category
        }

    }
</script>

<style>
   .div{
       text-align: center;
       display: flex;
       justify-content: space-around;
   }
</style>